<template>
  <a-card>
    <!-- 查询 -->
    <a-form
        ref="searchFormRef"
        :model="search_form"
        @submit="handleSearchSubmit"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
        label-align="left">
      <a-row>
        <a-col :flex="1">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="车辆ID" field="carId">
                <a-input placeholder="请输入车辆ID" v-model="search_form.carId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="记录日期" field="recordDate">
                <a-input placeholder="请输入记录日期" v-model="search_form.recordDate"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="记录类型" field="recordCate">
                <a-select :style="{width:'320px'}" placeholder="请选择记录类型" allow-clear
                          v-model="search_form.recordCate">
                  <a-option value="W">维修</a-option>
                  <a-option value="B">保养</a-option>
                  <a-option value="J">检修</a-option>
                  <a-option value="E">其他</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-divider style="height: 84px" direction="vertical"/>
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" html-type="submit">
              <template #icon>
                <icon-search/>
              </template>
              查询
            </a-button>
            <a-button @click="$refs.searchFormRef.resetFields()">
              <template #icon>
                <icon-refresh/>
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <!-- 添加操作 -->
      <a-row>
        <a-col :span="6" style="padding-bottom: 10px">
          <a-space>
            <a-button
                type="primary" shape="round" @click="addCarRecordOpen">
              <template #icon>
                <icon-plus/>
              </template>
              <template #default>新增记录</template>
            </a-button>
            <a-button shape="round">
              导出表格
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="mb-1"></a-col>
      </a-row>
    </a-form>
    <!-- 信息展示 -->
    <a-table :columns="columns" :data="carRecords"
             :pagination="pagination"
             @page-change="handlePaginationChange">
      <template #carId="{record,rowIndex}">
        <a-descriptions :column="1">
          <a-descriptions-item>
            {{ record.carIdWbxqy }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <template #car="{record,rowIndex}">
        <a-descriptions :column="1">
          <a-descriptions-item>
            {{ record.car.licensePlateWbxqy }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <template #recordCate="{record,rowIndex}">
        <a-tag v-if="record.recordCateWbxqy==='W'" style="border-radius: 20px; background-color: #8150A2;color:white">
          维修
        </a-tag>
        <a-tag v-else-if="record.recordCateWbxqy==='B'"
               style="border-radius: 20px; background-color: #FF6A88;color:white">
          保养
        </a-tag>
        <a-tag v-else-if="record.recordCateWbxqy==='J'"
               style="border-radius: 20px; background-color: #6acbff;color:white">
          检修
        </a-tag>
        <a-tag v-else-if="record.recordCateWbxqy==='E'"
               style="border-radius: 20px; background-color: #6acbff;color:white">
          其他
        </a-tag>
      </template>
      <template #operations="{record,rowIndex}">
        <a-space>
          <a-button
              type="outline" @click="editCarRecordOpen(record)">
            <template #icon>
              <icon-edit/>
            </template>
            编辑
          </a-button>
          <a-button
              type="outline" status="danger" @click="deleteCarRecordFun(record.maintenanceIdWbxqy)">
            <template #icon>
              <icon-delete/>
            </template>
            删除
          </a-button>
        </a-space>
      </template>
    </a-table>
    <!-- 添加记录对话框 -->
    <a-modal v-model:visible="showAddCarRecordModal" title="添加记录" @before-ok="addCarRecordOk"
             @cancel="addCarRecordCancel">
      <a-form ref="addCarRecordFormRef" :model="addCarRecordForm" :rules="rules">
        <a-form-item label="车辆ID" field="carIdWbxqy">
          <a-input v-model="addCarRecordForm.carIdWbxqy"/>
        </a-form-item>
        <a-form-item label="记录日期" field="recordDateWbxqy">
          <a-date-picker v-model="addCarRecordForm.recordDateWbxqy" format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item label="记录类型" field="recordCateWbxqy">
          <a-select v-model="addCarRecordForm.recordCateWbxqy" placeholder="请选择记录类型">
            <a-option value="W">维修</a-option>
            <a-option value="B">保养</a-option>
            <a-option value="J">检修</a-option>
            <a-option value="E">其他</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="详细描述" field="descriptionWbxqy">
          <a-input v-model="addCarRecordForm.descriptionWbxqy" type="textarea"/>
        </a-form-item>
        <a-form-item label="费用" field="costWbxqy">
          <a-input-number v-model="addCarRecordForm.costWbxqy" min="0"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 编辑记录对话框 -->
    <a-modal v-model:visible="showEditCarRecordModal" title="编辑记录" @before-ok="editCarRecordOk"
             @cancel="editCarRecordCancel">
      <a-form ref="editCarRecordFormRef" :model="editCarRecordForm" :rules="rules">
        <a-form-item label="车辆ID" field="carIdWbxqy">
          <a-input v-model="editCarRecordForm.carIdWbxqy" disabled/>
        </a-form-item>
        <a-form-item label="记录日期" field="recordDateWbxqy">
          <a-date-picker v-model="editCarRecordForm.recordDateWbxqy" format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item label="记录类型" field="recordCateWbxqy">
          <a-select v-model="editCarRecordForm.recordCateWbxqy" placeholder="请选择记录类型">
            <a-option value="W">维修</a-option>
            <a-option value="B">保养</a-option>
            <a-option value="J">检修</a-option>
            <a-option value="E">其他</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="详细描述" field="descriptionWbxqy">
          <a-input v-model="editCarRecordForm.descriptionWbxqy" type="text"/>
        </a-form-item>
        <a-form-item label="费用" field="costWbxqy">
          <a-input-number v-model="editCarRecordForm.costWbxqy" min="0"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script setup>
import {ref} from 'vue';
import {getAllCarRecords, addCarRecord, deleteCarRecord, updateCarRecord} from '@/api/carRecordMG.js';
import {useRoute} from 'vue-router';

const route = useRoute();

const carId = route.query.carIdWbxqy;

const search_form = ref({
  carId: carId,
  recordDate: '',
  recordCate: ''
});

const carRecords = ref([]);

const columns = [
  {
    title: "记录ID",
    dataIndex: "recordIdWbxqy"
  },
  {
    title: "车牌号",
    dataIndex: "licensePlateWbxqy",
    slotName: "car"
  },
  {
    title: "记录日期",
    dataIndex: "recordDateWbxqy"
  },
  {
    title: "类别",
    dataIndex: "recordCateWbxqy",
    slotName: "recordCate"
  },
  {
    title: "描述",
    dataIndex: "descriptionWbxqy"
  },
  {
    title: "费用",
    dataIndex: "costWbxqy"
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '150',
    align: 'center',
    slotName: 'operations',
    fixed: 'right'
  }
];

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
});

const showAddCarRecordModal = ref(false);
const showEditCarRecordModal = ref(false);

const addCarRecordForm = ref({
  carIdWbxqy: '',
  recordDateWbxqy: '',
  recordCateWbxqy: '',
  descriptionWbxqy: '',
  costWbxqy: 0
});

const editCarRecordForm = ref({
  carIdWbxqy: '',
  recordDateWbxqy: '',
  recordCateWbxqy: '',
  descriptionWbxqy: '',
  costWbxqy: 0
});

const rules = {
  carIdWbxqy: [{required: true, message: '请输入车辆ID'}],
  recordDateWbxqy: [{required: true, message: '请选择记录日期'}],
  recordCateWbxqy: [{required: true, message: '请选择记录类型'}],
  descriptionWbxqy: [{required: true, message: '请输入详细描述'}],
  costWbxqy: [{required: true, message: '请输入费用', type: 'number', min: 0}]
};

const loadCarRecords = async () => {
  const response = await getAllCarRecords({
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...search_form.value
  });
  console.log(response)
  carRecords.value = response.records;
  pagination.value.total = response.total;
};

const handleSearchSubmit = () => {
  pagination.value.current = 1;
  loadCarRecords();
};

const handlePaginationChange = (page, pageSize) => {
  pagination.value.current = page;
  pagination.value.pageSize = pageSize;
  loadCarRecords();
};

const addCarRecordOpen = () => {
  showAddCarRecordModal.value = true;
};

const addCarRecordOk = async () => {
  await addCarRecord(addCarRecordForm.value);
  showAddCarRecordModal.value = false;
  loadCarRecords();
};

const addCarRecordCancel = () => {
  showAddCarRecordModal.value = false;
};

const editCarRecordOpen = (record) => {
  editCarRecordForm.value = {...record};
  showEditCarRecordModal.value = true;
};

const editCarRecordOk = async () => {
  await updateCarRecord(editCarRecordForm.value);
  showEditCarRecordModal.value = false;
  loadCarRecords();
};

const editCarRecordCancel = () => {
  showEditCarRecordModal.value = false;
};

const deleteCarRecordFun = async (id) => {
  await deleteCarRecord(id);
  loadCarRecords();
};

loadCarRecords();
</script>

<style scoped>
/* Add custom styles here */
</style>

